<script setup>
    import { ref } from 'vue'
    //tabs栏数组
    const tabs=[
      { id: 1,name: '京东秒杀'},
      { id: 2,name: '每日特价'},
      { id: 3,name: '品类秒杀'}
    ]

    //点到谁就亮--默认第一个高亮
    const activeIndex=ref(0)
</script>

<template>
  <ul>
    <li v-for="(item,index) in tabs" :key="item.id">
      <!--  重新点击后，都会再次校验全等-->
      <a herf="#" @click="activeIndex=index" :class="{ active:activeIndex==index}">{{ item.name }}</a>
    </li>
  </ul>
</template>


<style >
  *{
    margin:0;
    padding:0;
  }
  ul{
    display:flex;
    list-style:none;
    border-bottom:2px solid #e01222;
    padding:0 10px;
  }

  ul li{
    width:100px;
    height:50px;
    line-height:50px;
    text-align:center;
  }

  ul li a{
    display:block;
    text-decoration: none;
    color:#333;
    font-weight:bold;
  }

  ul li a.active{
    background:#e01222;
    color:#fff;
  }
</style>